<template>
  <div>
    <el-form :model="form" label-width="100px" class="form">
      <el-form-item label-width="0px">
        <div class="to">
          <span class="t1">{{ t("当前配送至") }}</span>
          <span class="t2">{{ form.country.name }}</span>
          <span class="t3" @click="dialogHandle()"
            >{{ t("切换") }} <i class="el-icon-arrow-right"></i
          ></span>
        </div>
      </el-form-item>
      <el-form-item>
        <span slot="label" class="item-head">{{ t("地址信息") }}</span>
        <el-cascader
          class="input-border"
          v-model="form.address"
          :options="area_list"
          filterable
          :placeholder="t('请选择省/市/区/街道')"
          :props="{
            lazy: true,
            lazyLoad: areaLoad,
            label: 'name',
            value: 'name',
          }"
        >
        </el-cascader>
      </el-form-item>
      <el-form-item>
        <span slot="label" class="item-head">{{ t("详细地址") }}</span>
        <textarea
          v-model="form.detail_address"
          :placeholder="
            t('请输入详细地址信息，如道路、门牌号、小区、楼栋号、单元信息等')
          "
          style="
            outline: none;
            resize: none;
            width: 503px;
            height: 94px;
            background: #ffffff;
            border-radius: 4px;
            border: 1px solid #333333;
            padding: 16px 8px 16px 15px;
            font-weight: 400;
            font-size: 16px;
            color: #666666;
          "
        ></textarea>
      </el-form-item>
      <el-form-item>
        <span slot="label" class="item-head">{{ t("收件人姓名") }}</span>
        <el-input
          class="input-border"
          v-model="form.name"
          :placeholder="t('长度不超过25个字符')"
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <span slot="label" class="item-head">{{ t("手机号码") }}</span>
        <div class="input-area">
          <el-select
            v-model="form.area_number"
            :placeholder="t('请选择')"
            value-key="id"
            class="input-border s1"
          >
            <el-option
              v-for="item in phone_area"
              :key="item.id"
              :label="`${item.cn}  +${item.prefix}`"
              :value="item"
            >
            </el-option>
          </el-select>
          <el-input
            class="input-border s2"
            type="number"
            v-model="form.mobile"
            :placeholder="t('请收入手机号码')"
          >
          </el-input>
        </div>
      </el-form-item>
      <el-form-item>
        <span class="default-view" @click="form.default = !form.default">
          <i>
            <img
              v-if="form.default"
              src="../../../assets/images/public/selected.png"
              alt=""
              srcset=""
            />
            <img
              v-else="form.default"
              src="../../../assets/images/public/select-none.png"
              alt=""
              srcset=""
            />
          </i>
          <span class="default-txt">{{ t("设置为默认收货地址") }}</span>
        </span>
      </el-form-item>
      <el-form-item>
        <el-button class="submit-btn" @click="submitForm()">{{
          t("保存")
        }}</el-button>
      </el-form-item>
    </el-form>
    <addressList
      :addressListObj="address_list_obj"
      @click="addressActionHandle($event)"
    ></addressList>
    <el-dialog
      :title="t('请选择')"
      :visible.sync="show_dialog"
      width="350px"
      @close="handleClose()"
    >
      <el-select
        v-model="form.country"
        :placeholder="t('请选择')"
        filterable
        value-key="aid"
      >
        <el-option
          v-for="item in country_list"
          :key="item.aid"
          :label="item.name"
          :value="item"
        >
        </el-option>
      </el-select>
    </el-dialog>
  </div>
</template>

<script>
import addressList from "@/components/addressList.vue";
import { getCountryCode } from "@/utils/util";
import {
  getCountryList,
  getCityList,
  addressAdd,
  addressDel,
  setDefault,
  editAddress,
  getAddressList,
} from "@/utils/api";
export default {
  components: {
    addressList,
  },
  data() {
    return {
      form: {
        country: {},
        address: [],
        detail_address: "",
        name: "",
        area_number: "",
        mobile: "",
        default: false,
      },
      show_dialog: false,
      address_list_obj: {},
      country_list: [],
      city_list: [],
      area_list: [],
    };
  },
  computed: {
    phone_area() {
      let list = getCountryCode();
      this.form.area_number = list.find((e) => e.prefix == "86");
      return list;
    },
  },
  mounted() {
    getCountryList().then((res) => {
      if (res.code == 1) {
        this.country_list = res.data;
        this.form.country = res.data.find((e) => e.name == "中国");
        this.handleClose("country");
      }
    });
    this.getList();
  },
  methods: {
    /**
     * 简化翻译方法(少写property)
     * @param {String} v 最后一个key值
     */
    t(v) {
      return this.$t(`地址页.${v}`);
    },
    /**
     * 获取地址列表
     */
    getList() {
      getAddressList().then((res) => {
        if (res.code == 1) {
          this.address_list_obj = res.data;
        }
      });
    },
    /**
     * 添加收货地址
     */
    submitForm() {
      /**
                name 收货人
                mobile: `${this.form.area_number.prefix}-${this.form.mobile}`,
                country 国家
                province 省份
                city 市
                district  区
                address 详细地址
             */
      let param = {
        name: this.form.name,
        mobile: this.form.mobile,
        country: this.form.country.name,
        province: this.form.address[0],
        city: this.form.address[1] || "",
        district: this.form.address[2] || "",
        address: this.form.detail_address,
      };
      addressAdd(param).then((res) => {
        if (res.code == 1) {
          this.$message({
            message: res.msg,
            type: "success",
          });
          this.getList();
        }
      });
    },
    dialogHandle() {
      this.show_dialog = true;
    },
    handleClose() {
      getCityList({ id: this.form.country.id }).then((res) => {
        if (res.code == 1) {
          this.area_list = res.data;
        }
      });
    },
    areaLoad(node, resolve) {
      if (node.level && node.level == 3) {
        resolve();
        return;
      }
      if (node.data) {
        getCityList({ id: node.data.id }).then((res) => {
          if (res.code == 1) {
            resolve(res.data);
          } else {
            resolve([]);
          }
        });
      }
    },
    addressActionHandle(event) {
      if (event.type == "dele") {
        addressDel({ id: event.id }).then((res) => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.address_list_obj.data.splice(event.idx, 1);
          }
        });
      } else if (event.type == "default") {
        setDefault({ id: event.id }).then((res) => {
          if (res.code == 1) {
            this.$message({
              message: res.message,
              type: "success",
            });
            this.getList();
          }
        });
      } else if (event.type == "edit") {
        editAddress(event).then((res) => {
          if (res.code == 1) {
            this.$message({
              message: res.message,
              type: "success",
            });
            this.getList();
          }
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
::v-deep .el-dialog__body {
  text-align: center;
}
::v-deep .el-input__inner {
  border: 1px solid #333333;
}
.form {
  width: 600px;
  padding-top: 30px;

  .to {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    background: #f9f9f9;

    .t1 {
      margin-left: 30px;
      color: #666;
      font-size: 16px;
    }

    .t2 {
      margin-left: 20px;
      color: #222;
      font-size: 18px;
      font-weight: 500;
      flex: 1;
    }

    .t3 {
      margin-right: 10px;
      color: #222;
      font-size: 16px;
      cursor: pointer;
      user-select: none;
    }
  }

  .input-area {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;

    .s1 {
      flex: 8;
    }

    .s2 {
      margin-left: 14px;
      flex: 16;
    }
  }

  .default-txt {
    color: #222;
    font-size: 16px;
    margin-left: 6px;
  }

  .submit-btn {
    background: #ff5757;
    color: #fff;
    font-size: 20px;
    border-radius: 10px;
    line-height: 54px;
    width: 200px;
    padding: 0;
  }

  .item-head {
    color: #0a0a0b;
    font-size: 16px;
  }

  .input-border {
    width: 100%;
    // border: 1px solid #333333;
    // border-radius: 4px;
  }

  .default-view {
    cursor: pointer;
    user-select: none;
  }
}

/deep/ input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
</style>
